<template>
  <!-- 接触镜评估 -->
    <el-form inline readonly>
      <el-divider content-position="left">验光信息</el-divider>
      <el-row class="bg-row">
        <el-form-item label="验光号">
          <el-input v-model="checkData.checkNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="验光师">
          <el-input  v-model="checkData.checkerName" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input  v-model="checkData.checkDate" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">顾客资料</el-divider>
      <el-row class="bg-row">
        <el-form-item label="卡号">
          <el-input v-model="customerData.customerCard"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="width-125"  v-model="customerData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input class="width-125" v-if="customerData.gender == '0'" value="男" readonly></el-input>
          <el-input class="width-125" v-if="customerData.gender == '1'" value="女" readonly></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input class="width-125"  v-model="customerData.age" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="width-125"  v-model="customerData.phone1" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">接触镜评估</el-divider>
      <el-row class="bg-row">
        <el-form-item label-width="0">
          <el-radio-group v-model="dataForm.tryIn">
            <el-radio label="0">试戴</el-radio>
            <el-radio label="1">顾客要求不试戴</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label-width="0">
          <el-radio-group v-model="dataForm.type">
            <el-radio label="0">软镜</el-radio>
            <el-radio label="1">RPG</el-radio>
            <el-radio label="2">角膜塑形镜</el-radio>
          </el-radio-group>
        </el-form-item>
        
      </el-row>

      <div v-for="(item,index) in dataForm.chkContactGlassItems" :key="index">
        <table class="miui-table">
          <tr>
            <td :colspan="item.type == '2' ? 14 : 13" style="position: relative;">
              试戴

            </td>
          </tr>
          <tr>
            <td></td>
            <td>品种</td>
            <td>基弧</td>
            <td>屈光度</td>
            <td v-if="item.type == '2'">降幅</td>
            <td>直径</td>
            <td :colspan="3">追加</td>
            <td>VA</td>
            <td>定位</td>
            <td>活动度</td>
            <td v-if="item.type == '0'">覆盖</td>
            <td v-if="item.type == '1'">边翘</td>
            <td v-if="item.type == '2'">工作区</td>
            <td>建议</td>
          </tr>
          <tr>
            <td style="width: 60px;">OD</td>
            <td><el-input v-model="item.brandOd"></el-input></td>
            <td><el-input v-model="item.baseCurveOd"></el-input></td>
            <td><el-input v-model="item.diopterOd"></el-input></td>
            <td v-if="item.type == '2'"><el-input v-model="item.degradeOd"></el-input></td>
            <td><el-input v-model="item.diameterOd"></el-input></td>
            <td :colspan="3">
              <el-form-item label-width="0"><el-input  v-model="item.additionalOd" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.cylOd" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.axesOd" class="width-125"></el-input></el-form-item>
            </td>
            <td><el-input v-model="item.vaOd"></el-input></td>
            <td>
              <el-select v-model="item.locationOd">
                <el-option v-for="item in bizData.locationData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.activityOd">
                <el-option v-for="item in bizData.activityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <!-- <el-input v-model="item.zerodifferenceOd"></el-input> -->
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '0'">
                <el-option v-for="item in bizData.overlapData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '1'">
                <el-option v-for="item in bizData.edgeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zerodifferenceOd" v-if="item.type == '2'">
                <el-option v-for="item in bizData.workspaceData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.suggestionsOd">
                <el-option v-for="item in bizData.suggestionsData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td style="width: 60px;">OS</td>
            <td><el-input v-model="item.brandOs"></el-input></td>
            <td><el-input v-model="item.baseCurveOs"></el-input></td>
            <td><el-input v-model="item.diopterOs"></el-input></td>
            <td v-if="item.type == '2'"><el-input v-model="item.degradeOs"></el-input></td>
            <td><el-input v-model="item.diameterOs"></el-input></td>
            <td :colspan="3">
              <el-form-item label-width="0"><el-input  v-model="item.additionalOs" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.cylOs" class="width-125"></el-input></el-form-item>
              <el-form-item label-width="0"><el-input v-model="item.axesOs" class="width-125"></el-input></el-form-item>
            </td>
            <td><el-input v-model="item.vaOs"></el-input></td>
            <td>
              <el-select v-model="item.locationOs">
                <el-option v-for="item in bizData.locationData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.activityOs">
                <el-option v-for="item in bizData.activityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '0'">
                <el-option v-for="item in bizData.overlapData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '1'">
                <el-option v-for="item in bizData.edgeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
              <el-select v-model="item.zeroDifferenceOs" v-if="item.type == '2'">
                <el-option v-for="item in bizData.workspaceData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
            <td>
              <el-select v-model="item.suggestionsOs">
                <el-option v-for="item in bizData.suggestionsData" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </div>
    </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { addChkOptometryBasic, saveContactGlassData, getContactGlass } from '@/api/admin/optometry/optometry'
  export default {
    data() {
      return {
        visible: false,
        activeName: 'five',
        id: '',
        checkData:{
          checkNumber: '',
          checkDate:'',
          checker:''
        },
        dataForm: {
          tryIn: '0',
          type: '0',
          chkContactGlassItems: []
        },
        customerData: {},
      }
    },
    components: {},
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
        this.customerData = data.customer
        this.id = data.id
        this.$nextTick(() => {
          if(this.id){
            getContactGlass(this.id).then(result => {
              let resultData = result.data.data
              if(resultData){
                this.dataForm = resultData
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
  }
</style>
